import { getDefaultSetOfBook, messages } from 'share/common';
import React, { Component } from 'react';
import { Modal, Icon, Button } from 'antd';
import { connect } from 'react-redux';
import SlideFrame from 'components/slide-frame';
import AdvancedTable from 'components/advanced-table';
import 'styles/expense-reimbursement-control/mileage-subsidy/new-mileage-subsidy.scss';
import NewMode from 'containers/expense-reimbursement-control/new-mileage-subsidy/new-mode';
import mileageService from 'containers/expense-reimbursement-control/new-mileage-subsidy/mileage-service';
import { DataProcessing } from 'containers/expense-reimbursement-control/new-mileage-subsidy/dataSources';
import NewUnitRule from 'containers/expense-reimbursement-control/new-mileage-subsidy/unit-price-mode/new-unit-rule';

const { SimpleTable } = AdvancedTable;

@connect(mapStateToProps)
@DataProcessing
class UnitPriceMode extends Component {
  static  propTypes = {};
  state = {
    setObj: {
      mode: {
        component: NewMode,
        flag: 'addUnitMode'
      },
      rule: {
        flag: 'addUnitRule',
        component: NewUnitRule,
      }
    },
    columns1: ['levelCode', 'levelOrgName', 'companyNameList', 'enabled', 'operation'],
    columns2: ['levelCode', 'levelOrgName', 'companyNameList', 'enabled', 'currency', 'applicationUserGroupScope', 'operation'],
    searchColumns1: ['companyNameList', 'enabled'],
    searchColumns2: ['companyNameList', 'enabled'],
    setOfBook: {}
  };

  modeRef = null;

  ruleRef = null;

  componentDidMount(){
    this.getSetOfBook();
  }

  handleDelete = (record) => {
    let service,
      params,
      ref;

    if (record.unitPriceOptId) {
      service = 'deleteUnitMode';
      params = record.unitPriceOptId;
      ref = this.modeRef;

    } else {
      service = 'deleteUnitRules';
      params = record.unitPriceRuleOptId;
      ref = this.ruleRef;
    }

    mileageService[service](params)
      .then(() => {
        ref.getList();
      });
  };

  getModeService = (page, size, searchParams) => {
    return mileageService.getUnitModes({ page, size, ...searchParams });
  };

  getRuleService = (page, size, searchParams) => {
    return mileageService.getUnitRules({ page, size, ...searchParams });
  };

  afterCloseSlideFrame = (flag) => {
    if (flag === 'mode') {
      this.modeRef.getList();
      return;
    }

    if (flag === 'rule') {
      this.ruleRef.getList();
    }

  };

  getSetOfBook = () => {
    getDefaultSetOfBook()
      .then(res => {
        if (res.data && res.data.defaultSetOfBooksId) {
          this.setState({
            setOfBook: {
              id: res.data.defaultSetOfBooksId,
              name: res.data.defaultSetOfBooksName
            }
          });
        }
      });
  };

  handleClickInfo = () => {
    const labels = [
      messages('expense-12.key130')/*如需开启/禁用该功能，请前往【APP应用管理 - 私车公用】页面：*/,
      messages('expense-12.key131')/*1、将该应用状态设置为【启用 】，用户可在【APP-应用】界面 看到该应用。*/,
      messages('expense-12.key132')/*2、将该应用状态设置为【禁用 】，该应用将不在【APP-应用】中显示。*/
    ];
    Modal.info({
      title: messages('expense-12.key136')/*了解更多*/,
      content: (
        <section>
          {labels.map(item => <p>{item}</p>)}
        </section>
      )
    });
  };

  handleNewUnit = (flag, record) => {
    const { setObj, setOfBook } = this.state;
    SlideFrame.open({
      title: !record ? messages('common.create')/*新建*/ : messages('common.edit')/*编辑*/,
      content: setObj[flag].component,
      afterClose: this.afterCloseSlideFrame,
      params: {
        mode: setObj[flag].flag,
        setOfBook,
        ...record
      }
    }, this);
  };

  render() {
    const { columns1, columns2, searchColumns1, searchColumns2 } = this.state;
    return (
      <section className="mileage-unit">
        <section className="mileage-unit-title">
          <h3 className='first-title'>
            {messages('expense-12.key157')/*单价模式相关设置*/}
          </h3>
          <span className="mileage-unit-info" onClick={this.handleClickInfo}>
            <Icon type="bulb"/> {messages('expense-12.key136')/*了解更多*/}
          </span>
        </section>
        <Button disabled={this.isReadOnly()}  onClick={() => this.handleNewUnit('mode')} type="primary">
          {messages('common.create')/*新建*/}
        </Button>
        <SimpleTable
          onRow={record => ({
            onClick: () => this.handleNewUnit('mode', record)
          })}
          onRef={ref => this.modeRef = ref}
          rowKey='unitPriceOptId'
          tableName="util-mode"
          columns={this.handleColumns(columns1)}
          service={this.getModeService}
          searchForm={this.handleSearchForm(searchColumns1)}
        />
        <section className="mileage-unit-title">
          <h3 className='first-title'>
            {messages('expense-12.key158')/*单价模式补贴金额计算规则*/}
          </h3>
        </section>
        <Button disabled={this.isReadOnly()} onClick={() => this.handleNewUnit('rule')} type="primary">
          {messages('common.create')/*新建*/}
        </Button>
        <SimpleTable
          onRow={record => ({
            onClick: () => this.handleNewUnit('rule', record)
          })}
          onRef={ref => this.ruleRef = ref}
          rowKey='unitPriceRuleOptId'
          tableName="util-rule"
          columns={this.handleColumns(columns2)}
          service={this.getRuleService}
          searchForm={this.handleSearchForm(searchColumns2)}
        />

      </section>
    );
  }
}

function mapStateToProps(state) {
  return {
    currentMenuPermission: state.main.currentMenuPermission,
  };
}

export default UnitPriceMode;
